<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:core="http://www.contact.core.com/contacts/core/ui"
      xmlns:contact="http://www.contact.contact.com/contacts/contact/ui"
      xmlns:common="http://www.contact.common.com/contacts/ui"
      xmlns:a4j="http://richfaces.org/a4j">

<ui:component>
    <style type="text/css">
        .topLeft {
            vertical-align: top;
            text-align: left;
        }

        .noPaddingTop {
            padding-top:1px;
        }

        .leftMargin {
            margin-left: 10px;
        }
    </style>
    <!--<h:form>-->

        <rich:panel bodyClass="rich-laguna-panel-no-header, noPaddingTop, leftMargin"
                    style="height:auto; width:100%; border:none; float:left; overflow:auto">
            <a4j:outputPanel rendered="#{contactBean.otherContactSelected}" layout="block" style="float:left; width:100%; vertical-align:top">
                <h:panelGrid columns="1">


                    <h:panelGrid columns="2" columnClasses="topLeft, topLeft">
                        <a4j:outputPanel id="pictureCommandPanel" layout="block"  rendered="#{contactSessionBean.focusedItem.addsByMe}">
                            <contact:addByMePictureCommand/>
                        </a4j:outputPanel>
                        <a4j:outputPanel rendered="#{not contactSessionBean.focusedItem.addsByMe}">
                            <contact:friendPictureCommand/>
                        </a4j:outputPanel>

                        <h:panelGrid columns="1">
                            <h:outputLabel value="#{contactSessionBean.focusedItem.fullName}"/>
                            <h:outputLabel rendered="#{not contactSessionBean.focusedItem.addsByMe}"
                                           style="color:gray;"
                                           value="Account E'mail : ">
                                <h:outputLabel style="color:black" value="#{contactSessionBean.focusedItem.email}"/>
                            </h:outputLabel>
                            <h:outputLabel style="color:red"
                                           rendered="#{contactSessionBean.focusedItem.addsByMe}"
                                           value="Add's by me"/>
                            <h:panelGrid rendered="#{contactSessionBean.focusedItem.addsByMe}" columns="3">
                                <a4j:commandLink value="Edit"
                                                 action="#{otherContactBean.prepareToUpdateContact}"
                                                 reRender="contactModalPanel"
                                                 oncomplete="Richfaces.showModalPanel('contactModalPanel');"
                                                 limitToList="true"
                                        />
                                <h:outputLabel rendered="#{otherContactBean.existModuleContact}" value="|"
                                               style="margin:2px; color:gray;"/>
                                <a4j:commandLink rendered="#{otherContactBean.existModuleContact}"
                                                 value="Delete"
                                                 action="#{otherContactBean.prepareToDeleteContact}"
                                                 reRender="otherContactConfirmModalPanel"
                                                 oncomplete="Richfaces.showModalPanel('otherContactConfirmModalPanel');"
                                                 limitToList="true"/>

                            </h:panelGrid>
                            <rich:panel id="otherContactRichPanel"

                                        bodyClass="rich-laguna-panel-no-header"
                                        style="width:100%; overflow:auto; min-height:150px; margin-top:15px; height:auto">
                                <h:panelGrid columns="1">
                                    <contact:mailView canEdit="#{contactSessionBean.focusedItem.addsByMe}"
                                                      bean="#{otherContactBean}"
                                                      id="otherContactMailTelephone"/>
                                    <contact:addressView canEdit="#{contactSessionBean.focusedItem.addsByMe}"
                                                         bean="#{otherContactBean}"
                                                         id="otherContactAddress"/>
                                </h:panelGrid>

                            </rich:panel>
                        </h:panelGrid>
                    </h:panelGrid>

                    <!--<rich:panel id="otherContactPanel"-->

                    <!--bodyClass="rich-laguna-panel-no-header"-->
                    <!--style="width:100%; overflow:auto; min-height:150px; height:auto">-->
                    <!--<h:panelGrid columns="1">-->
                    <!--<contact:mailView canEdit="#{contactSessionBean.focusedItem.addsByMe}"-->
                    <!--bean="#{otherContactBean}"-->
                    <!--id="otherContactMailTelephone"/>-->
                    <!--<contact:addressView canEdit="#{contactSessionBean.focusedItem.addsByMe}"-->
                    <!--bean="#{otherContactBean}"-->
                    <!--id="otherContactAddress"/>-->
                    <!--</h:panelGrid>-->

                    <!--</rich:panel>-->

                </h:panelGrid>
            </a4j:outputPanel>

            <a4j:outputPanel rendered="#{not contactBean.otherContactSelected}" layout="block" style="float:left;">
                <rich:panel bodyClass="rich-laguna-panel-no-header" style="overflow:auto">
                    <h:outputLabel value="No One Contact's selected"/>
                </rich:panel>
            </a4j:outputPanel>
        </rich:panel>


    <!--</h:form>-->
  
</ui:component>


</html>
